<#assign ctx=request.contextPath/>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商品评价</title>
		<link rel="stylesheet" href="${ctx}/css/common.css" />
		<link rel="stylesheet" href="${ctx}/css/comments.css" />
		<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
		<script type="text/javascript" src="${ctx}/js/common.js"></script>
	</head>

	<body>
		<!--头部-->
		<div class="header">
			<#include "common/top.html"> 
			<#include "common/shoplist.html">
		</div>
		<!--内容-->
		<div class="middle">
			<div class="box">
				<div class="progress">
					<ul>
						<li>
							<h4>拍下宝贝</h4>
							<span></span>
							<p></p>
						</li>
						<li>
							<h4>付款</h4>
							<span></span>
							<p></p>
						</li>
						<li>
							<h4>卖家发货</h4>
							<span></span>
							<p></p>
						</li>
						<li>
							<h4>收货</h4>
							<span></span>
							<p></p>
						</li>
						<li>
							<h4>评价</h4>
							<span></span>
						</li>
					</ul>
				</div>
				<h4>评价宝贝</h4>
				<ol class="pro_comment">
					<li>
						<span class="pro_img"><a href="pro_details.html"><img src="${ctx}/img/comments_img.jpg" alt="" /></a></span>
						<div class="pro_info">
							<h5><a href="pro_details.html">${shops.title}</a></h5>
							<span class="color_sort">颜色：灰色</span>
							<span class="num">数量：1个</span><br />
							<span class="feature">特色：蒸煮一体</span>
						</div>

						<div>
							<span>商品满意度</span>
							<ul id="satisfaction">
								<li><img id="img_1" src="${ctx}/img/star_none.png" /></li>
								<li><img id="img_2" src="${ctx}/img/star_none.png" /></li>
								<li><img id="img_3" src="${ctx}/img/star_none.png" /></li>
								<li><img id="img_4" src="${ctx}/img/star_none.png" /></li>
								<li><img id="img_5" src="${ctx}/img/star_none.png" /></li>
							</ul>
						</div>
						<script type="text/javascript">
							$(function(){
								$("img[id^='img_'").click(function(){
									var imgid = $(this).attr("id").replace("img_","");
									$("#satisfactionComment").val(imgid);
								})
							})
						</script>
						<div>
							<span>送货的速度</span>
							<ul id="speed">
								<li><img id="im_1" src="${ctx}/img/star_none.png" /></li>
								<li><img id="im_2" src="${ctx}/img/star_none.png" /></li>
								<li><img id="im_3" src="${ctx}/img/star_none.png" /></li>
								<li><img id="im_4" src="${ctx}/img/star_none.png" /></li>
								<li><img id="im_5" src="${ctx}/img/star_none.png" /></li>
							</ul>
						</div>
			 			<script type="text/javascript">
							$(function(){
								$("img[id^='im_'").click(function(){
									var imid = $(this).attr("id").replace("im_","");
									$("#speedComment").val(imid);
								})
							})
						</script> 
						<div>
							<span>商品的包装</span>
							<ul id="decorate">
								<li><img id="ig_1" src="${ctx}/img/star_none.png" /></li>
								<li><img id="ig_2" src="${ctx}/img/star_none.png" /></li>
								<li><img id="ig_3" src="${ctx}/img/star_none.png" /></li>
								<li><img id="ig_4" src="${ctx}/img/star_none.png" /></li>
								<li><img id="ig_5" src="${ctx}/img/star_none.png" /></li>
							</ul>
						</div>
			 			<script type="text/javascript">
							$(function(){
								$("img[id^='ig_'").click(function(){
									var igid = $(this).attr("id").replace("ig_","");
									$("#decorateComment").val(igid);
								})
							})
						</script> 
						
					</li>
				</ol>
				<form action="${ctx}/customer/comment/addComment" method="post">
					<input type="hidden" id="imageUpload" name="image"/>
					<input type="hidden" id="satisfactionComment" name="satisfaction" />
					<input type="hidden" id="speedComment" name="speed"/>
					<input type="hidden" id="decorateComment" name="decorate"/>
					<input type="hidden" id="comment" name="comment"/> 
					<input type="hidden" value="${cid}" name="shop.id" > 
					
					<h5>买家印象</h5>
					<div class="evalutes" id="impress" > 
						<span>值得信赖</span>
						<span>正品</span>
						<span>满意</span>
						<span>还不错</span>
						<span>大品牌</span>
					</div>
					<div class="upload">
						<img id="imageId" name="image" src="${ctx}/img/upload/uploadComment.jpg" style="width: 150px;height: 150px;"/><br />
						<span>请单击我，上传买家图片</span>
						<input type="file" name="myfile" form="uploadComment"><br/><br/><br/>
						<input type="submit" value="上传" form="uploadComment">
					</div>
					<textarea placeholder="我也来说说" name="comment"></textarea><br />
					
					<input type="submit" id="sub" value="提交"/>
				</form>
				<form id="uploadComment"  method="post" enctype="multipart/form-data"></form>
				<span style="color: red;">${tip!''}</span>
				
				
				
				<h3>其他人的评价</h3>
				<ul class="evalute">
					<li>
						<div class="account">
							<span class="avatar"><img src="${ctx}/img/comments_avatar.jpg" /></span>
							<span class="account_name">账号</span>
						</div>
						<div>
							<p>以前推荐过朋友买两到四人的锅，家里用的也是那个型号。这次自己搬出来住，果断入手一个小号的，好可爱的锅，两个人吃足够了。以后每天给自己做早饭！ 包装很好，很满意。</p>
							<span class="time">2017-4-22</span>
							<a href="javascript:void(0)" class="addition">追加评论</a>
							<img src="${ctx}/img/evalute_img01.jpg" />
							<img src="${ctx}/img/evalute_img02.jpg" />
							<img src="${ctx}/img/evalute_img03.jpg" />
						</div>
						
					</li>
					<li>
						<div class="account">
							<span class="account_name">12212212</span>
						</div>
						<p>以前推荐过朋友买两到四人的锅，家里用的也是那个型号。这次自己搬出来住，果断入手一个小号的，好可爱的锅，两个人吃足够了。以后每天给自己做早饭！ 包装很好，很满意。</p>
					</li>
					<li>
						<div class="account">
							<span class="account_name">12212212</span>
						</div>
						<p>以前推荐过朋友买两到四人的锅，家里用的也是那个型号。这次自己搬出来住，果断入手一个小号的，好可爱的锅，两个人吃足够了。以后每天给自己做早饭！ 包装很好，很满意。</p>
					</li>
				</ul>
			</div>
		</div>
		<!--尾部-->
			<#include "common/bottom.html">
		<script type="text/javascript" src="${ctx}/js/comments.js"></script>
		<script type="text/javascript"
		src="${ctx}/static/lib/jquery/jquery.form.js"></script>
	</body>
	<script type="text/javascript">
		$(function(){
			$('#uploadComment').ajaxForm({
			    url:"${ctx}/customer/comment/uploadpic",
			    type:"POST",
			    dataType:"json",
			    async:true,
			    success:function(data){
			    	alert("------")
			    	if(data.status == "success"){
				   		$("#imageId").attr("src","${ctx}/img/upload/"+data.image)
				   		$("#imageUpload").val(data.image);
				    }
			    },
			    error:function(){
			    	alert("文件上传失败!");
			    }
			});
		})
	</script>

</html>